<template>
  <el-container>
    <el-aside width="300px" style="padding: 20px 10px">
      <el-row style="margin-bottom: 20px">
        <UserInfoCard :user-info="articleUserVo"/>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <HotArticle @clickHotArticle="clickHotArticle"/>
      </el-row>
    </el-aside>
    <el-main v-my-loading="loading">
      <div v-show="!loading" class="tcommonBox">
            <span class="s-round-date" >
                <span class="month" v-html="showInitDate(detailObj.createTime,'month')+'月'"></span>
                <span class="day" v-html="showInitDate(detailObj.createTime,'date')"></span>
            </span>
        <header>
          <div>
            <h1>{{detailObj.title}}</h1>
          </div>
          <h2 >
            <i class="fa fa-fw fa-user"></i>发表于 <span >{{detailObj.createTime}}</span> •
            <i class="fa fa-fw fa-eye"></i>{{detailObj.viewCount}} 次围观 •
          </h2>
        </header>
        <div id = "text" ref="markdown" class="article-content markdown-body" v-html="detailObj.content"></div>
        <div class="comment" >
          <Comment
          :user="userInfo"
          comment-width="50"
          :comment-num="commentNum"
          :comment-list="commentList"
          :children-count-map="childrenCountMap"
          @doSendRoot="doSendRoot"
          @addMore="addMore"
          @doSend="doSend"
          @openMoreComment="openMoreComment"
          @deleteRootComment="deleteRootComment"
          @deleteComment="deleteCommentByID"
          >
          </Comment>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import { initDate } from '@/utils/server.js'
  import { getArticle } from "@/api/article/article";
  import { mavonEditor } from 'mavon-editor'
  import Comment from "../../components/Comment";
  import {
    addComment,
    addRootComment,
    deleteComment,
    getMoreChildrenComment,
    getRootComment
  } from "../../api/comment/comment";
  import HotArticle from "../../components/HotArticle";
  import UserInfoCard from "../../components/UserInfo-Card";
  export default {
    name: "ArticleDetail",
    components: {UserInfoCard, HotArticle, Comment},
    data() {
      return {
        aid:'',//文章ID
        detailObj:{},//返回详情数据
        loading: true,
        userInfo: {},
        commentList: [],
        commentNum: 0,
        moreMap:{},
        articleUserVo: {},
        childrenCountMap: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          aid: null
        },
        commentParams: {
          commentNum: 1,
          commentSize: 10,
          aid: null,
          rootCommentId: null
        }
      }
    },
    created() {
      this.getArticleDetail(this.$route.query.aid)
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.aid = this.$route.query.aid
      this.commentParams.aid = this.aid
      this.queryParams.aid = this.aid
    },
    mounted() {
      this.getCommentList()
    },
    watch: {
      '$route':'routeChange'
    },
    methods: {
      showInitDate(date,full) {//年月日的编辑
        return initDate(date,full);
      },
      clickHotArticle(item) {
        if (this.aid !== item.id ) {
          this.aid = item.id
          this.commentParams.aid = this.aid
          this.queryParams.aid = this.aid
          this.commentList = []
          this.commentNum = 0
          this.moreMap = {}
          this.childrenCountMap = []
          this.$router.push({name: 'ArticleDetail', query: {aid: item.id}})
        }
      },
      routeChange() {
        this.aid = this.$route.query.aid
        this.getArticleDetail(this.aid)
        this.getCommentList()
      },
      deleteRootComment(commentId , index) {
        deleteComment(commentId).then(() => {
          this.$message.success('操作成功')
          this.commentList.splice(index , 1)
        })
      },
      deleteCommentByID(id , index, rndex) {
        deleteComment(id).then(() => {
          this.$message.success('操作成功')
          this.commentList[index].childrenList.splice(rndex , 1)
        })
      },
      getArticleDetail(aid) {
        this.loading = true
        getArticle(aid).then((response)=>{
          this.detailObj = response
          this.articleUserVo = response.articleUserVo
          const markdownIt = mavonEditor.getMarkdownIt()
          // markdownIt.re
          this.detailObj.content = markdownIt.render(response.content);
          document.title = this.detailObj.title
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      openMoreComment(index , rootCommentId, callback) {
        //不同评论不同分页
        if(this.moreMap[index] === undefined || this.moreMap[index] === null) {
          this.$set(this.moreMap, index , 1)
          this.commentParams.commentNum = 1
        } else {
          this.moreMap[index] ++
          this.commentParams.commentNum = this.moreMap[index]
        }
        this.commentParams.rootCommentId = rootCommentId
        getMoreChildrenComment(this.commentParams).then((res) => {
          if (this.commentList[index].childrenList === undefined
            || this.commentList[index].childrenList === null) {
            this.$set(this.commentList[index], 'childrenList' ,[])
          }
          this.commentList[index].childrenList = this.commentList[index].childrenList.concat(res.rows)
          this.commentList[index].childrenCount = res.total
          if (this.childrenCountMap[index] === undefined
            || this.childrenCountMap[index] === null ) {
            this.$set(this.childrenCountMap, index , 0)
          }
          this.childrenCountMap[index] += res.rows.length
          callback()
        }).catch(() => {
          callback()
        })
      },
      doSend(text, toUserId, toRootId, index) {
        const data = {
          createBy : this.userInfo.id,
          content: text,
          commentArticleId: this.aid,
          toCommentUserId: toUserId,
          rootCommentId: toRootId
        }
        addComment(data).then((res) => {
          this.$message.success('发送成功')
          if( this.childrenCountMap[index] === undefined || this.childrenCountMap[index] === null ){
            this.openMoreComment(index, toRootId)
          } else {
            this.commentList[index].childrenList.unshift(res)
            this.commentList[index].childrenCount++
            this.commentNum++
            this.childrenCountMap[index] ++
          }
        })
      },
      getCommentList(callback) {
        getRootComment(this.queryParams).then((res) => {
          this.commentList = this.commentList.concat(res.rows)
          this.commentNum = res.total
          if(typeof callback === "function"){
            callback()
          }
        }).catch(() => {
          if(typeof callback === "function"){
            callback()
          }
        })
      },
      doSendRoot(text) {
        const data = {
          createBy : this.userInfo.id,
          content: text,
          commentArticleId: this.aid
        }
        addRootComment(data).then((res) => {
          this.$message.success('发送成功')
          this.commentList.unshift(res)
        })
      },
      addMore(callback) {
        this.queryParams.pageNum++
        this.getCommentList(callback)
      }
    }
  }
</script>

<style scoped>
  .comment {
    margin-top: 30px;
  }
  .markdown-body /deep/ img{
    display: block;
    margin: 15px auto;
    border-radius: 10px;
    max-width: 80%;
  }
  .article-content {
    text-indent: 2vw;
  }
  .tcommonBox{
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    position: relative;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    padding:45px;
    border-radius: 30px;
    font-size: 15px;
    box-shadow: 0 0 15px #b6b5b5;
  }
  .tcommonBox header{
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }
  .tcommonBox  header h1{
    margin: 10px 0;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
  }
  .tcommonBox header h2{
    margin:10px 0;
    line-height: 24px;
    text-align: center;
    color:#555;
    font-size: 14px;
  }
  .tcommonBox section p{
    line-height: 24px;
    margin:10px 0;
  }
  .tcommonBox  header h2 .el-rate,.rateBox{
    display:inline-block;
  }
  .tcommonBox  header h2 .el-rate i{
    font-size: 16px;
  }
  .s-round-date{
      position: absolute;
      top:-20px;
      left:-20px;
      height:60px;
      width:70px;
      padding-top:10px;
      border-radius: 100px;
      color:#fff;
      background: #58bfeb;;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }
  .s-round-date span{
    text-align: center;
    display: block;
  }
  .s-round-date .day{
    font-size: 30px;
    font-weight: 700;
  }
</style>
